<html>
  <head>
    <meta charset="utf-8" />
    <script src="../js/echarts.js"></script>
    <style>
      #chart {
        width: 800px;
        height: 300px;
      }
      #chart2 {
        width: 800px;
        height: 300px;
      }
    </style>
  </head>
  <body>
    <div id="chart"></div>
  </body>
  <script>
    const chart = echarts.init(document.getElementById('chart'))
    const option = {
      legend: {
        data: ['高度(km)与气温(°C)变化关系']
      },
      tooltip: {
        trigger: 'axis', // 提示框触发模式（鼠标移入显示）
        formatter: 'Temperature : <br/>{b}km : {c}°C'
      },
      grid: {
        left: '1%',
        right: '1%',
        bottom: '1%',
        containLabel: true // 是否会自动适应网格的大小并保留在可视区域内
      },
      xAxis: {
        type: 'value',
        axisLabel: {
          formatter: '{value} °C'
        }
      },
      yAxis: {
        type: 'category',
        axisLine: {
          onZero: false // 坐标轴轴线是否在刻度上
        },
        axisLabel: {
          formatter: '{value} m'
        },
        boundaryGap: false, // 图表刻度距离两侧间距去除
        data: ['0', '100', '500', '1000', '3000', '5000', '6000', '7000', '8000']
      },
      series: [
        {
          name: '高度(km)与气温(°C)变化关系',
          type: 'line', // 图表类型（折线图）
          smooth: true, // 是否平滑曲线显示
          lineStyle: {
            width: 3, // 线条宽度
            shadowColor: 'rgba(0,0,0,0.8)', // 阴影颜色
            shadowBlur: 10, // 阴影的模糊程度
            shadowOffsetY: 10 // 阴影在垂直方向上的偏移量
          },
          data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
        }
      ]
    }
    chart.setOption(option)
  </script>
</html>
